import React, {useEffect, useState} from 'react';
import {Dropdown, MenuProps} from 'antd';
import ChangePasswordForm from '@/components/ChangePasswordForm';
import moment from 'dayjs';
import {clearLocalStorage} from "@/utils/storageUtil.ts";

const dayMap: any = {
    1: '周一',
    2: '周二',
    3: '周三',
    4: '周四',
    5: '周五',
    6: '周六',
    0: '周日',
};

const HeaderRight: React.FC = () => {
    const [date, setDate] = useState({
        day: '周',
        date: '2020.01.01',
        time: '00:00:00',
    });
    const [isFullScreen, setIsFullScreen] = useState(false);
    const [modalVisible, setModalVisible] = useState(false);
    const logout = () => {
        //登出后全删除
        clearLocalStorage();
        window.location.href = `/login`;
    };
    const toggleFullscreen = () => {
        if (isFullScreen) {
            if (document.exitFullscreen) {
                document.exitFullscreen();
                //@ts-ignore
            } else if (document.mozCancelFullScreen) {
                //@ts-ignore
                document.mozCancelFullScreen();
                //@ts-ignore
            } else if (document.webkitExitFullscreen) {
                //@ts-ignore
                document.webkitExitFullscreen();
                //@ts-ignore
            } else if (document.msExitFullscreen) {
                //@ts-ignore
                document.msExitFullscreen();
            }
        } else {
            if (document.body.requestFullscreen) {
                document.body.requestFullscreen();
                //@ts-ignore
            } else if (document.body.mozRequestFullScreen) {
                //@ts-ignore
                document.body.mozRequestFullScreen();
                //@ts-ignore
            } else if (document.body.webkitRequestFullscreen) {
                //@ts-ignore
                document.body.webkitRequestFullscreen();
                //@ts-ignore
            } else if (document.body.msRequestFullscreen) {
                //@ts-ignore
                document.body.msRequestFullscreen();
            }
        }
        setIsFullScreen(!isFullScreen);
    };

    const userMenu: MenuProps['items'] = [
        {
            key: 'changePwd',
            label: (
                <a target="_blank" rel="noopener noreferrer" onClick={() => {
                    setModalVisible(true)
                }}>
                    修改密码
                </a>
            ),
        },
        {
            key: 'logout',
            label: (
                <a target="_blank" rel="noopener noreferrer" onClick={() => logout()}>
                    退出登录
                </a>
            ),
        }];
    useEffect(() => {
        let timer: any = setInterval(() => {
            const now = new Date();
            const time = moment(now).format('HH:mm:ss'),
                day = now.getUTCDay(),
                date = moment(now).format('YYYY.MM.DD');
            setDate({
                time: time,
                date: date,
                day: dayMap[day],
            });
        }, 1000);
        return () => {
            clearInterval(timer);
            timer = null;
        };
    }, []);
    return (
        <div className="header-top-right">
            <div className="time">{date?.time}</div>
            <div className="date">
                {date?.day}
                <br/>
                {date?.date}
            </div>
            <Dropdown menu={{items: userMenu}} overlayClassName="header_dropdown">
                <i className="header-right-action user"></i>
            </Dropdown>
            {/* <div className="header-right-action user">
        </div> */}
            <div
                className="header-right-action full-screen"
                onClick={toggleFullscreen}
            >
                {/* {isFullScreen ? '退出全屏' : '全屏'} */}
            </div>
            <div className="divider-vertical"></div>
            <div
                className="header-right-action logout"
                onClick={() => logout()}
            ></div>
            {modalVisible && (
                <ChangePasswordForm
                    modalVisible={modalVisible}
                    onCancel={() => {
                        setModalVisible(false);
                    }}
                />
            )}
        </div>
    );
};

export default HeaderRight;
